<template>
  <div class="v-eqpt-type">
    <c-row-search>
      <el-form :model="form" ref="form" inline @submit.native.prevent>
        <el-form-item prop="keywordSearch">
          <el-input
            v-model="form.keywordSearch"
            clearable
            @keyup.enter.native="query"
            :placeholder="tplLang('text_asset_a', ['btn_search_a'])"
          >
            <c-icon slot="prefix" name="search" prefix></c-icon>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">
            {{ multLang('btn_search_a') }}
          </el-button>
          <el-button @click="reset">
            {{ multLang('btn_rst_a') }}
          </el-button>
        </el-form-item>
        <el-form-item>
          <c-popover-form>
            <el-form :model="popperForm" ref="popperForm" label-width="100px">
              <c-row :col="6">
                <c-col>
                  <el-form-item
                    :label="multLang('title_category_a', ':')"
                    prop="assetCategorySearch"
                  >
                    <c-mult-select
                      v-model="popperForm.assetCategorySearch"
                      :options="assetCategoryTypeList"
                      :placeholder="
                        tplLang('text_choose_a', ['title_category_a'])
                      "
                    >
                    </c-mult-select>
                  </el-form-item>
                </c-col>
                <c-col>
                  <el-form-item
                    :label="multLang('title_mp', ':')"
                    prop="isUseSearch"
                  >
                    <c-select
                      v-model="popperForm.isUseSearch"
                      :options="isEnableList"
                      clearable
                      :placeholder="tplLang('text_choose_a', ['title_mp'])"
                    >
                    </c-select>
                  </el-form-item>
                </c-col>
              </c-row>
            </el-form>
          </c-popover-form>
        </el-form-item>
      </el-form>
      <template #right>
        <el-button
          type="primary"
          @click="$router.push({ name: Routes.EqptTypeAdd })"
        >
          <c-icon name="plus"></c-icon>

          {{ multLang('btn_new_a') }}
        </el-button>
        <c-select-more @command="moreActions">
          <el-button type="primary">
            {{ multLang('btn_more_a') }}
            <c-icon name="down"></c-icon>
          </el-button>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="exportSelect">
              {{ multLang('btn_export_a') }}
            </el-dropdown-item>

            <el-dropdown-item command="exportAll">
              {{ multLang('btn_export_b') }}
            </el-dropdown-item>

            <el-dropdown-item command="exportType">
              {{ multLang('btn_import_b', 'title_category_ah') }}
            </el-dropdown-item>

            <!-- <el-dropdown-item command="batchDel">
              {{ multLang('text_ap') }}
            </el-dropdown-item> -->
          </el-dropdown-menu>
        </c-select-more>
      </template>
    </c-row-search>
    <c-table
      class="v-eqpt-type-table"
      height="calc(100% - 66px)"
      :data="table.data"
      select
      :col="col"
      :vol="table.vol"
      @select-change="table.select = $event"
      @switch-change="switchChange"
    >
      <template #opn="{ row }">
        <el-button type="text" @click="edit(row)">
          <c-icon name="edit"></c-icon>
          <span>
            {{ multLang('btn_edit_a') }}
          </span>
        </el-button>

        <el-button type="text" @click="del(row)">
          <c-icon name="delete"></c-icon>
          <span>
            {{ multLang('btn_delete_a') }}
          </span>
        </el-button>
      </template>
      <!-- <template #opn>
        <el-table-column width="200px" fixed="right" align="center">
          <template slot="header" slot-scope="{}">
            {{ multLang('title_action_a') }}
          </template>
          <div slot-scope="{ row }" style="text-align: center;">
            <el-button type="text" @click="edit(row)">
              <c-icon name="edit"></c-icon>
              <span>
                {{ multLang('btn_edit_a') }}
              </span>
            </el-button>

            <el-button type="text" @click="del(row)">
              <c-icon name="delete"></c-icon>
              <span>
                {{ multLang('btn_delete_a') }}
              </span>
            </el-button>
          </div>
        </el-table-column>
      </template> -->
    </c-table>
  </div>
</template>
<script>
import { delAssetType, editAssetType, getAssetTypeData } from '@api/eqpt-type'

import { Routes } from '@vue/router/routes'
import { toRoute } from '@/util/router'
export default {
  name: 'CEqptType',
  components: {},
  props: {},
  data() {
    return {
      Routes: Routes,
      form: {
        keywordSearch: ''
      },
      popperForm: {
        isUseSearch: '',
        assetCategorySearch: []
      },
      table: {
        select: '',
        data: [],
        vol: [
          { key: 'title_asset_c', val: true },
          { key: 'title_category_a', val: true },
          { key: 'title_note_a', val: true },
          { key: 'title_created_a', val: true },
          { key: 'title_e', val: false },
          { key: 'title_aal_n', val: true }
        ]
      }
    }
  },
  computed: {
    isEnableList() {
      return this.optionList('is_enable')
    },
    assetCategoryTypeList() {
      return this.optionList('asset_category_type')
    },
    col() {
      return [
        { label: 'id', prop: 'id', hide: true },
        {
          label: 'title_asset_c',
          prop: 'category_name',
          // fixed: 'left',
          route: {
            auth: true,
            name: Routes.EqptTypeView
          }
        },
        { label: 'title_category_a', prop: 'type_name' },
        { label: 'title_note_a', prop: 'remark' },
        { label: 'title_created_a', prop: 'create_time' },
        { label: 'title_e', prop: 'category_code' },
        {
          label: 'title_aal_n',
          prop: 'is_use',
          switch: {
            auth: true,
            list: this.isEnableList
          }
        }
      ]
    }
  },
  watch: {},
  beforeCreate() {},
  created() {
    this.setOption({ key: 'is_enable' })
    this.setOption({
      key: 'asset_category_type'
    })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {
    this.query()
  },
  deactivated() {
    const { close } = this.$route.params
    close && this.reset()
  },
  beforeDestroy() {},
  destroyed() {},
  methods: {
    switchChange({ val: is_use, valBack }, row) {
      editAssetType({ id: row.id, is_use })
        .then(({ code }) => {
          if (code === 200) {
            this.query()
          } else {
            valBack()
          }
        })
        .catch(() => {
          valBack()
        })
    },
    query() {
      getAssetTypeData({
        ...this.form,
        ...this.popperForm
      }).then(({ data }) => {
        this.table.data = data
      })
    },
    reset() {
      this.$refs.popperForm.resetFields()
    },
    edit(row) {
      const { id } = row || {}
      toRoute(Routes.EqptTypeView, {
        params: { id, edit: true }
      })
    },
    del(row = {}) {
      this.$confirm(
        this.tplLang('text_ah', ['btn_delete_a', 'title_category_ah']),
        this.multLang('btn_delete_a', 'title_category_ah'),
        {
          confirmButtonText: this.multLang('btn_sure_a'),
          cancelButtonText: this.multLang('btn_cancel_a'),
          type: 'warning',
          iconClass: 'c-icon icon-info-circle color-danger'
        }
      ).then(() => {
        row.id &&
          delAssetType({
            asset_category_id: row.id
          }).then(() => {
            this.query()
          })
      })
    },
    moreActions(cmd) {
      const fn = this[cmd]
      fn && typeof fn === 'function' && fn()
    },
    exportSelect() {},
    exportAll() {},
    exportType() {},
    batchDel() {
      const ids = this.table.select
      this.$confirm(
        this.tplLang('text_ah', ['text_ap', 'title_category_ah']),
        this.multLang('text_ap', 'title_category_ah'),
        {
          confirmButtonText: this.multLang('btn_sure_a'),
          cancelButtonText: this.multLang('btn_cancel_a'),
          type: 'warning',
          iconClass: 'c-icon icon-info-circle color-danger'
        }
      ).then(() => {
        ids &&
          delAssetType({
            asset_category_id: ids
          }).then(() => {
            this.query()
          })
      })
    }
  }
}
</script>
<style lang="scss">
@include admin {
  .v-eqpt-type {
    &-table {
      height: calc(100% - 66px);
      overflow: hidden;
    }
  }
}
</style>
